<template>
  <div>
    <el-card class="box-card" style="height:760px;">
      <div style="padding:0 0 10px 0">
        <div>
          <span style="font-size: 14px">菜单名：</span>
          <el-input v-model="searchName" size="medium" clearable placeholder="搜索菜单名称"
                    style="width: 230px;margin-right: 20px "></el-input>
          <el-button style="margin-left: 10px;padding:9px 10px;" size="medium" type="primary" @click="loadInfo ">
            <i class="el-icon-search"></i> 查询
          </el-button>
        </div>
      </div>
      <div style="padding-top: 20px">
        <el-table
            v-loading="loading"
            :data="logTable"
            :header-cell-style="{color:'#000',background:'#f5f7fa'}"
            border
            row-key="id"
            height="640"
            stripe
            style="width: 100% ;height: 650px;"
        >
          <el-table-column>
            <template slot="header">
              <div style="display:flex; justify-content: space-between">
                <div>
                  <el-button className="el-button-small" type="primary" icon="el-icon-plus" size="mini"
                             @click="addMenuOne">添加一级菜单
                  </el-button>
                  <el-button className="el-button-small" type="danger" icon="el-icon-delete" size="mini"
                             @click="handleDel">删除
                  </el-button>
                 </div>
                <div>
                  <el-tooltip class="item" effect="dark" content="刷新" placement="top-start">
                    <div style="border: 1px solid #ccc;">
                      <a href=""><i class="el-icon-refresh"
                                    style="font-size: 20px;padding: 3px;margin: 0 auto;"></i></a>
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </template>
            <el-table-column align="center" type="index" label="序号" width="100"></el-table-column>
            <el-table-column align="center" label="名称" prop="name">
            </el-table-column>
            <el-table-column align="center" label="路径" prop="path"></el-table-column>
            <el-table-column align="center" label="图标" class-name="fontSize18" label-class-name="fontSize12">
              <template slot-scope="scope">
                <span :class="scope.row.icon" style="font-size: 25px"/>
              </template>
            </el-table-column>
            <el-table-column align="center" label="描述" prop="description"></el-table-column>
            <el-table-column align="center" fixed="right" label="编辑" width="400">
              <template slot-scope="scope">
                <el-button icon="el-icon-menu" size="small" type="info" v-if="!scope.row.pid &&  !scope.row.path" @click="handleAdd(scope.row.id)">新增子菜单
                </el-button>
                <el-button icon="el-icon-edit" size="small" type="success" @click="setMenu(scope.row)">编辑</el-button>
                <el-button icon="el-icon-delete" size="small" type="danger" @click="handleDel(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog :inline="true" :title="title_dialog" :visible.sync="menuFormVisible" width="30% ">
      <el-form :model="menuForm" label-width="100px">
        <el-form-item label="菜单名称：">
          <el-input v-model="menuForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单路径：">
          <el-input v-model="menuForm.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标：">
          <el-select v-model="menuForm.icon" placeholder="请选择" style="width: 80%;">
            <el-option v-for="item in options" :value="item.value" :key="item.name" :label="item.name">
              <i :class="item.value" style="padding-right: 10px; font-size: 18px"> {{item.name}}</i>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单描述：">
          <el-input v-model="menuForm.description"></el-input>
        </el-form-item>
        <el-form-item label="页面路径：">
          <el-input v-model="menuForm.pagePath"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="menuFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>

import request from "@/utils/request";

export default {
  name: "menu",
  data() {
    return {
      logTable: [],
      loading: true,
      form: {},
      searchName: '',
      menuForm: {},
      menuFormVisible: false,
      menuProps: {},
      title_dialog:'',
      options:[]
    }
  },
  created() {
    this.reloadTable();
  },
  methods: {
    reloadTable() {
      this.loadInfo();
    },
    save(){
      this.menuFormVisible = false;
      request.post('/menu/update',this.menuForm).then(res =>{
        if (res.code === '200') {
          this.$message.success(res.data);
          this.loadInfo();
          // localStorage.setItem("menus", JSON.stringify(res.data.menuList));
        }else if (res.code === '500') {
          this.$message.error(res.data)
        }
      })

    },
    loadInfo() {
      console.log(this.searchName)
      request.get("/menu/info", {
        params: {
          name: this.searchName
        }
      }).then(response => {
        this.loading = false
        if (response.code === '200') {
          this.logTable = response.data
          request.get("/icon/info").then(res =>{
            this.options = res.data
          })
        } else {
          this.$message.error("获取用户信息失败")
        }
      })
    },
    handleAdd(pid){
      this.menuForm = {};
      this.menuFormVisible = true;
      this.title_dialog = '新增菜单'
      if (pid) {
        this.menuForm.pid = pid;
        console.log(this.menuForm.pId)
      }
    },
    addMenuOne(){
      this.menuForm = {};
      this.menuFormVisible = true;
      this.title_dialog = '新增一级菜单'
    },
    setMenu(row) {
      this.menuForm = JSON.parse(JSON.stringify(row))
      this.menuFormVisible = true;
      this.title_dialog = '修改菜单'
    },
    handleDel(id) {
      request.get('/menu/del/'+id).then(res =>{
        if (res.code === '200') {
          this.$message.success("删除成功")
          this.loadInfo()

        }else {
          this.$message.error("删除失败")
        }
      })
    },

  },
}
</script>

<style scoped>
/deep/ .el-button--mini {
  padding: 8px 10px;
}

/deep/ .el-dialog__header {
  border-bottom: 1px solid #ebebeb;
}

.color {
  background-color: #1a1a1c;
}
.fontSize18{
  font-size: 18px;
}
.fontSize12{
  font-size: 12px;
}
</style>